<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>电影列表</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
            integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}">
</head>
<body>
    <div>
        <nav th:fragment="commonNav" class="navbar navbar-inverse navbar-fixed-top" style="position: relative">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" th:href="@{/}">电影推荐网</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a th:href="@{/}">首页</a></li>
                        <li><a th:href="@{/about}">关于</a></li>
                        <li><a th:href="@{/contact}">联系我们</a></li>
                    </ul>
                    <span class="slogan">
                        <p>最懂你的影视资源网站</p>
                    </span>
                </div><!--/.nav-collapse -->
            </div>
        </nav>
    </div>
    <div class="container" th:if="${hasMoreToShow}">
        <h1 class="page-header" style="margin-top: 10px">电影列表</h1>
        <div class="row">
            <div th:each="movie,status:${movies}" class="col-md-2 img-box">
                <div th:if="${movie}">
                    <a th:href="@{http://localhost:8081/getRec/{movieId}(movieId=${movie.id})}">
                        <img th:src="@{(${movie.url})}"  width="100%" />
                    </a>
                    <div class="movie-title">
                        <p style="margin-top: 8px; font-family: Microsoft YaHei,'微软雅黑','黑体','宋体';" th:text="${#strings.substringBefore(movie.name,'(')}"></p>
                    </div>
                </div>
                <div th:unless="${movie}">
                    <img th:src="@{/common/no-data.jpg}" width="100%"></img>
                </div>
                <br th:if="${(status.count)%6==0}">
            </div>
        </div>

        <div class="no-margin-top" align="center">
            <ul class="pagination no-margin">

                <!-- 首页 -->
                <li th:if="${pageInfo.pageNum!=1}">
                    <a th:href="@{/(pageNum=0)}">首页</a>
                </li>

                <!-- 上一页 -->
                <li th:if="${pageInfo.pageNum!=1}">
                    <a th:href="@{/(pageNum=${pageInfo.pageNum}-1)}" th:text="上一页"></a>
                </li>

<!--                <li th:each="page:${#numbers.sequence(pageINfo.pageNum+1, pageINfo.pageNum+3)}">-->
<!--                    <a th:href="@{#httpServletRequest.requestURL(pageNum=page)}" th:text="${page}"></a>-->
<!--                </li>-->


                <!-- 下一页 -->
                <li th:if="${pageInfo.hasNext()}">
                    <a th:href="@{/(pageNum=${pageInfo.pageNum}+1)}" th:text="下一页"></a>
                </li>

                <!-- 尾页 -->
                <li th:if="${pageInfo.hasNext()}">
                    <a th:href="@{/(pageNum=${pageInfo.getTotalPage()})}">尾页</a>
                </li>

                <!-- 跳转 -->
                <li>
                    <a>
                        <form th:href="@{/(pageNum=2)}" style="height: fit-content">
                            跳转到：<input type="text" name="toPage" th:value="${toPage}" style="height: 16px; width: 40px">
                            <input type="submit" hidden>
                        </form>
                    </a>
                </li>

            </ul>
        </div>
    </div>
</body>
</html>